<template>
  <div class="table-box">
    <ProTable :columns="columns" :pagination="false" :request-api="getCateList" ref="proRef">
      <template #tableHeader="scope">
        <el-button type="primary" @click="opera(undefined)" v-auth="'添加'">新增分类</el-button>
        <el-button type="danger" v-auth="'删除'" @click="deleteItem(scope.selectedListIds)">批量删除</el-button>
      </template>
      <template #can_edit="{ row }">
        <el-tag v-show="row.can_edit" type="success">是</el-tag>
        <el-tag v-show="!row.can_edit" type="info">否</el-tag>
      </template>
      <template #opera="{ row }">
        <el-button type="primary" link @click="check(row)" v-auth="'内容列表'">查看</el-button>
        <el-button type="primary" link @click="opera(row)" v-auth="'编辑'">编辑</el-button>
        <el-button type="primary" link v-auth="'删除'" @click="deleteItem([row.id])">删除</el-button>
      </template>
    </ProTable>
    <CateDrawer ref="cateRef"></CateDrawer>
    <listDrawer ref="listRef"></listDrawer>
  </div>
</template>

<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface/index";
import { getCateList, addCate, editCate, deleteCate } from "@/api/modules/common_phrase";
import CateDrawer from "./components/cateDrawer.vue";
import listDrawer from "./components/listDrawer.vue";
import { ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";

const columns: ColumnProps[] = [
  { type: "selection", width: 60 },
  { prop: "category_sort", label: "排序值", width: 100 },
  { prop: "category_name", label: "分类名称", width: 200 },
  { prop: "can_edit", label: "是否自定义", width: 100 },
  { prop: "opera", label: "操作" }
];

const proRef = ref<InstanceType<typeof ProTable> | null>();

const cateRef = ref<InstanceType<typeof CateDrawer> | null>();
const opera = (row: any) => {
  const params: any = {
    row: row ? row : { category_name: "", category_sort: 100, can_edit: false },
    api: row ? editCate : addCate,
    getTable: proRef.value?.getTableList
  };
  cateRef.value?.open(params);
};

// 查看
const listRef = ref<InstanceType<typeof listDrawer> | null>();
const check = (row: any) => {
  console.log(row);
  listRef.value?.open(row.id);
};

// 删除
const deleteItem = async (ids: any) => {
  try {
    await useHandleData(deleteCate, { ids }, "删除所选内容");
    await proRef.value?.getTableList();
  } catch (error) {}
};
</script>

<style></style>
